var tit = document.querySelectorAll(".title p")
var hidd = document.querySelectorAll(".box .hidd")
for (var w = 0; w < hidd.length; w++) {
    hidd[w].index = w
}
var addl = document.querySelectorAll(".box .hidd .add")
var xa = document.querySelector(".title .xain")
var main = document.querySelector(".main")
var off = document.querySelector(".warp .off")
var ther = document.querySelector(".warp .input .ther")
var seban = document.querySelectorAll(".warp .seban span")
console.log(seban)
console.log(main)
console.log(off)
    //console.log(xa.offsetLeft)
    //console.log(xa.offsetWidth)
var wid = xa.offsetWidth
var lef = xa.offsetLeft
    //边框运动left值及选项卡
for (var i = 0; i < tit.length; i++) {
    tit[i].index = i;
    tit[i].addEventListener('click', function () {
        //        console.log(this.index)
        console.log(this.index * wid)
        for (var j = 0; j < tit.length; j++) {
            tit[j].classList.remove("active")
        }
        this.classList.add("active")
            //        console.log(this.innerHTML)
        console.log(this.index * wid + 'px')
        var zhi = this.index * wid + 'px'
        xa.style.left = zhi
        for (var k = 0; k < hidd.length; k++) {
            hidd[k].classList.remove("active")
        }
        hidd[this.index].classList.add("active")
    })
}
//点击显示弹框
for (var q = 0; q < addl.length; q++) {
    addl[q].index = q
    addl[q].addEventListener('click', function () {
        main.style.display = "block"
        console.log(tit[this.index].innerHTML)
        var thx = tit[this.index].innerHTML
        ther.innerHTML = thx
        for (var y = 0; y < hidd.length; y++) {
            hidd[y].classList.remove("active")
        }
        hidd[this.index].classList.add("active")
    })
}
//  获取色板点击事件
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
    return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
for (var f = 0; f < seban.length; f++) {
    seban[f].onclick = function () {
        console.log(this.currentStyle.backgroundColor)
        var se = this.currentStyle.backgroundColor
        for (var y = 0; y < seban.length; y++) {
            seban[y].classList.remove("active")
        }
        this.classList.add("active")
    }
}
//点击关闭
off.addEventListener('click', function () {
    main.style.display = "none"
    var vale = document.querySelector(".warp .input input")
    vale.value = ""
    baocun.style.display = "inline-block"
    var bocun = document.querySelector(".bocun")
    bocun.style.display = "none"
})
var input = document.querySelector(".warp .input input")
var baocun = document.querySelector(".warp .input .baocun")
var guanbi = document.querySelector(".warp .input .guanbi")
    //console.log(value)
guanbi.addEventListener('click', function () {
        main.style.display = "none"
        vale.value = ""
        baocun.style.display = "inline-block"
        var bocun = document.querySelector(".bocun")
        bocun.style.display = "none"
    })
    //点击添加
baocun.addEventListener('click', function () {
    var tian = document.querySelector(".box .hidd.active")
    var vale = document.querySelector(".warp .input input").value
    var li = document.createElement("li")
    li.className = "as"
    console.log(tian)
    tian.appendChild(li);
    input.value = "";
    main.style.display = "none"
    var all = document.querySelectorAll(".box .active .as")
    console.log(all)
    var i = document.createElement("i")
    var span = document.createElement("span")
    var div = document.createElement("div")
    var a = document.createElement("a")
    var p = document.createElement("p")
    var pp = document.createElement("p")
    var ppp = document.createElement("p")
        //        i添加图标
    for (var t = 0; t < all.length; t++) {
        all[t].appendChild(span)
        all[t].appendChild(div)
        all[t].appendChild(a)
        var als = document.querySelectorAll(".box .active .as span")
        var alss = document.querySelectorAll(".box .active .as a")
        als[t].appendChild(i)
        alss[t].appendChild(p)
        alss[t].appendChild(pp)
        alss[t].appendChild(ppp)
        console.log(i.parentNode.parentNode.parentNode.index)
        var shun = i.parentNode.parentNode.parentNode.index
        if (shun == 0) {
            i.className = "fa fa-list"
        }
        else if (shun == 1) {
            i.className = "fa fa-tag"
        }
        else {
            i.className = "fa fa-heart"
        }
    }
    //判断赋值
    if (Boolean(vale)) {
        console.log(vale)
        var node = document.createTextNode(vale);
        console.log(node)
        li.appendChild(node);
    }
    else {
        console.log("flase")
        li.className = "fei"
        var fei = document.querySelector(".box .fei")
        var fa = document.querySelector(".box .hidd.active")
        console.log(fei)
        console.log(fa)
        fa.removeChild(fei)
    }
    //    获取颜色
    var se = document.querySelector(".warp .seban .active")
    console.log(se)
    var yan = se.currentStyle.backgroundColor
    console.log(yan)
    div.style.background = yan
        //    重置颜色板
    for (var h = 0; h < seban.length; h++) {
        seban[h].classList.remove("active")
    }
    seban[0].classList.add("active")
        //    li经过显示三个点事件
    var ler = document.querySelectorAll(".hidd .as")
    console.log(ler)
    for (var m = 0; m < ler.length; m++) {
        ler[m].addEventListener('mouseover', function () {
            console.log(this.lastElementChild)
            var lerr = document.querySelectorAll(".hidd .as a")
            for (var aa = 0; aa < ler.length; aa++) {
                lerr[aa].classList.remove("active")
            }
            this.lastElementChild.classList.add("active")
        })
        ler[m].addEventListener('mouseleave', function () {
            var lerr = document.querySelectorAll(".hidd .as a")
            for (var aa = 0; aa < ler.length; aa++) {
                lerr[aa].classList.remove("active")
            }
        })
    }
    var bianji = document.querySelector(".bianji")
    var banji = document.querySelector(".banji")
    var leor = document.querySelectorAll(".hidd .as")
    console.log(banji)
    banji.addEventListener('click', function () {
            main.style.display = "block"
            var shui = bianji.offsetTop - 72
            var tyu = shui / 30
            tyu = tyu - 1
            console.log(leor[tyu].innerHTML)
            var cde = leor[tyu].textContent
            var vale = document.querySelector(".warp .input input")
            vale.value = cde
            baocun.style.display = "none"
            var bocun = document.querySelector(".bocun")
            console.log(bocun)
            bocun.style.display = "inline-block"
            bocun.addEventListener('click', function () {
                console.log(1)
                var cdee = leor[tyu]
                console.log(cdee)
                console.log(vale.value)
                cdee.innerHTML = '<span><i class="fa fa-list"></i></span><div style="background: rgb(0, 128, 0);"></div><a class="active"><p></p><p></p><p></p></a>' + vale.value
//                main.style.display = "none"
                vale.value = ""
                var se = document.querySelector(".warp .seban .active")
                console.log(se)
                var yan = se.currentStyle.backgroundColor
                console.log(yan)  
                console.log(leor[tyu].childNodes[1]) 
                    //    重置颜色板
                for (var h = 0; h < seban.length; h++) {
                    seban[h].classList.remove("active")
                }
            })
        })
        //    三个点经过事件显示操作编辑框
    var bianji = document.querySelector(".bianji")
    console.log(alss)
    for (var r = 0; r < alss.length; r++) {
        alss[r].index = r
        alss[r].addEventListener('mouseover', function () {
            bianji.classList.add("active")
            var bian = this.index + 1;
            console.log(bian)
            var topz = bian * 30 + 72
            console.log(topz)
            var zhent = topz + 'px'
            console.log(zhent)
            bianji.style.top = zhent
        })
        alss[r].addEventListener('mouseleave', function () {
            bianji.classList.remove("active")
        })
        bianji.addEventListener('mouseover', function () {
            this.classList.add("active")
            console.log(bianji.offsetTop - 72)
            var shui = bianji.offsetTop - 72
            var tyu = shui / 30
            tyu = tyu - 1
            console.log(tyu)
            var lerr = document.querySelectorAll(".hidd .as a")
            console.log(lerr[tyu])
            lerr[tyu].classList.add("active")
        })
        bianji.addEventListener('mouseleave', function () {
            this.classList.remove("active")
            var lerr = document.querySelectorAll(".hidd .as a")
            for (var aq = 0; aq < lerr.length; aq++) {
                lerr[aq].classList.remove("active")
            }
        })
    }
    vale.value = ""
})